import {
    AppstoreOutlined,
    CalendarOutlined,

    LinkOutlined,
    MailOutlined,

    SettingOutlined,
  } from '@ant-design/icons';
  import { Menu} from 'antd';
  import React, { useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import './index.scss'
  import Img from '../../assets/2.png'
  
  function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }
  
  const items = [
    getItem('基础信息', '1', <MailOutlined />),
    getItem('Navigation Two', '2', <CalendarOutlined />),
    getItem('Navigation Two', 'sub1', <AppstoreOutlined />, [
      getItem('Option 3', '3'),
      getItem('Option 4', '4'),
      getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
    ]),
    getItem('Navigation Three', 'sub2', <SettingOutlined />, [
      getItem('Option 7', '7'),
      getItem('Option 8', '8'),
      getItem('Option 9', '9'),
      getItem('Option 10', '10'),
    ]),
    getItem(
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        Ant Design
      </a>,
      'link',
      <LinkOutlined />,
    ),
  ];

  const User = () => {
    const navi=useNavigate()
    const [mode, setMode] = useState('inline');
  const [theme, setTheme] = useState('light');




    function usermessage(e){
      // console.log(e);
      if(e.key==1){
        navi('/user')
      }else if(e.key==2){
        navi('/user/more')
      }
    }

  
    return (
      <div className='user'>
       <div className='head'>
         <h1><a href='#' onClick={()=>navi('/')}><img alt='' src={Img}/></a></h1>
       
       </div>
       <div className='content'>
        <Menu
          style={{
            width: 256,
          }}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode={mode}
          theme={theme}
          items={items}
          onSelect={e=>usermessage(e)}
        />
        <div className='children'>
          <Outlet/>
        </div>
       </div>
        
      </div>
      
    );
  };
  
  export default User;